/*
 * @Description: 新增规则弹窗
 * @Author: Rfan
 * @Date: 2022-04-06 16:19:54
 * @LastEditTime: 2022-05-25 09:01:04
 */

import { useCallback, useEffect } from 'react';
import { Button, Modal } from 'antd';
import type { FC } from 'react';
import ConditionWrap from './components/ConditionWrap';
import OperateWrap from './components/OperateWrap';
import { AddRuleContextProvider, useAddRuleContext } from './contexts/AddRuleContext';

interface IAddRuleDialogProps {
  visible?: boolean;
  onClose?: any;
}
const AddRuleDialogComp: FC<IAddRuleDialogProps> = (props) => {
  console.log('AddRuleDialogComp', props.visible);

  const { visible: dialogVisible, onClose } = props;
  const { visible, hideDialog, showDialog } = useAddRuleContext();

  const memoizedClose = useCallback(() => onClose(), []);

  useEffect(() => {
    console.log('effect visible', dialogVisible);

    if (dialogVisible) {
      showDialog();
    }
  }, [dialogVisible]);

  const onCancel = () => {
    hideDialog();
    memoizedClose();
  };

  return (
    <Modal
      title="查询条件生产器"
      visible={visible}
      width={800}
      destroyOnClose
      onCancel={onCancel}
      footer={[
        <Button key="close" onClick={onCancel}>
          取消
        </Button>,
        <Button key="save" type="primary" onClick={onCancel}>
          保存查询条件
        </Button>
      ]}
    >
      <ConditionWrap />
      <OperateWrap />
    </Modal>
  );
};

const AddRuleDialog = (props: any) => (
  <AddRuleContextProvider>
    <AddRuleDialogComp {...props} />
  </AddRuleContextProvider>
);

export default AddRuleDialog;
